var ImageList="common/showImageList.html";

var contactsCallback_img=myApp.onPageInit('imageList', function (page) {
    var ImageList = iss_localStorage.get("yuqing_ImgList").split(",");
    var middleImageList=iss_localStorage.get("yuqing_middleImageList").split(",");
    if(ImageList!=null && ImageList!=undefined && ImageList.length>0){
        initImageList(ImageList);
        $$("#image_list_page .navbar-inner .center").html("共"+ImageList.length+"张图片");
    }

    function initImageList(imgList) {
        var picWidth = (screen.availWidth - 30) / 2;
        var picHeight = picWidth * 2 / 3;
        var picDivide = 10;
        createDiv();
        //创建div函数
        function createDiv() {
            for (var i = 0; i < imgList.length; i++) {                            //循环创建40个div
                var Div = document.createElement('div');      //在dom创建div
                //var DivH = Math.floor(Math.random() * 30 + picMinHeight);   //产生50~300的随机数用作div的高度
                Div.style.height = picHeight + 'px';
                Div.style.width = picWidth + 'px';
                Div.className = i;
                // Div.innerHTML = '<img style="width:'+picWidth+'px;height:'+picHeight+'px;background-size: cover;background-position: center center;overflow: hidden;background-image:url(' + imgList[i] + ')"/>';                             //把产生的高度赋值给div
                Div.innerHTML='<img src="'+imgList[i]+'" style="width:'+picWidth+'px;height:'+picHeight+'px"/>';
                Div.addEventListener("click", function () {
                    var index = this.className;
                    var myPhotoBrowser = myApp.photoBrowser({
                        photos: middleImageList,
                        type: 'standalone',
                        zoom: true,
                        exposition: true,
                        navbar: true,
                        backLinkText: "返回",
                        ofText: " / ",
                        theme: 'dark',
                        initialSlide: index,
                    });
                    myPhotoBrowser.open();
                });
                $$(".page-content-image-list").append(Div);
            };
            arrangeDiv();
        }
        //div排列函数
        function arrangeDiv() {
            //var AllDiv = document.getElementsByTagName('.pic>div');   //获取页面创建所有的div
            var AllDiv = $$('.page-content-image-list').find("div");
            var windowWidth = document.body.clientWidth;    //获取浏览器的可是宽度
            // var num=Math.floor(windowWidth/210);   //通过窗口的宽度÷每个div的宽度得到一行所能容纳的个数       210：div的宽度200+div的边距10）。Math.floor：取整
            var num = Math.floor(windowWidth / picWidth);
            var cenShow = (windowWidth - num * picWidth) / 2   //让整个div居中显示（可视宽度-div总宽度）÷2
            var arrayH = []    //这里我们定义一个数组用来存储div的高度
            for (var i = 0; i < AllDiv.length; i++) {    //通过循环让每一个div都输出
                if (i < num) {         //如果i<num说明这是第一行
                    AllDiv[i].style.left = (i % num + 1) * 10 + picWidth * i + 'px';     //通过i值得增加，给第一排的div赋值left值
                    AllDiv[i].style.top = '54px';    //因为是第一排，所以他们的高度都为0；
                    arrayH[i] = picHeight;        //将第一行div的高度存储到数组中
                    //console.log(arrayH)       //通过打印可以看出每一个div高度具体值
                } else {
                    var minKey = findMinKey(arrayH);          //把健值赋值给minKey变量
                    AllDiv[i].style.top = arrayH[minKey] + 54 + picDivide + 'px';
                    AllDiv[i].style.left = (i % num + 1) * 10 + picWidth * minKey + 'px';
                    if (i == AllDiv.length - 1) {
                        AllDiv[i].style.marginBottom = 10 + "px";
                    }
                    arrayH[minKey] += picHeight + picDivide;      //将新的div高度存放到arrayH数组中
                }
            };
        }
        //查询第二排第一个位置对应上一排的键
        function findMinKey(Arr) {
            var minNum = Math.min.apply(null, Arr);      //取出上一排数组中最小的那个值 打印查看效果
            var k = 0;                                                    //获取数组中这个最小值对应的健
            for (k in Arr) {
                if (Arr[k] == minNum) {
                    return k;
                };
            }
        }
        //当窗口发生变化时调用
        window.onresize = function () {
            arrangeDiv();
        }
    }
});

var href = window.location.href;
if (href.indexOf(ImageList) > -1) {
    contactsCallback_img.trigger();
}